<!-- 组合式 -->
<script setup>
	import './index.scss'
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted,
	} from 'vue';

	import {
		ElMessage
	} from 'element-plus'
	import api from '@/api/api';
	import util from '@/utils/util';
	import router from '@/router';

	import {
		useUserStore,
		useConfigStore,
	} from '@/stores'

	// 组件
	import tableVue from './components/table.vue';
	import table2Vue from './components/table2.vue';
	import table3Vue from './components/table3.vue';
	import statistics1Vue from './components/statistics1.vue';
	import statistics2Vue from './components/statistics2.vue';
	import chartVue from './components/chart.vue';
	import table4Vue from './components/table4.vue';

	import title from '@/assets/img/title.png'

	// 参数
	const pages = reactive({})

	// 挂载
	onMounted(() => {
		init(); // 初始化
	})

	// 初始化
	async function init() {}

	// 跳转
	function go(title, type) {
		router.push({
			path: '/sublevel',
			query: {
				title,
				type,
			}
		})
	}
</script>
<template>
	<div class="HomeView">
		<img class="app-back" :src="util.getImageUrl('u0_state0.jpg')" />
		<!-- <img class="app-u1" :src="util.getImageUrl('u1.png')" /> -->

		<!-- 标题 -->

		<!-- <p class="title">智慧实验室数据统计中心</p> -->
		<img :src="title" class="app-title" />

		<!-- 时间 -->
		<p class="app-date-time">{{util.getMYD('YMD')}} {{util.getWeek()}}</p>

		<div class="main-subject">
			<el-row style="display: flex;justify-content: space-between;">
				<el-col :span="7">
					<p class="table-title">中心学期实验资源数量</p>
					<div class="app-background" style="height: 45%;" @click="go('中心学期实验资源数量', 'table')">
						<table-vue />
					</div>
					<p class="table-title">中心学期实验资源使用情况</p>
					<div class="app-background" style="height: 45%;" @click="go('中心学期实验资源使用情况', 'table2')">
						<table2-vue />
					</div>
				</el-col>
				<el-col :span="9">
					<div class="">
						<statistics1-vue />
					</div>
					<div style="margin-top: 20px;">
						<statistics2-vue />
					</div>
					<p class="table-title">中心学期实验资源使用情况</p>
					<div class="app-background" style="height: 41%;" @click="go('中心学期实验资源使用情况', 'table3')">
						<table3-vue />
					</div>
				</el-col>
				<el-col :span="7">
					<p class="table-title">中心学期实验室利用率</p>
					<div class="app-background" @click="go('中心学期实验室利用率', 'chart')">
						<chart-vue />
					</div>
					<p class="table-title">实验室利用率排行</p>
					<div class="app-background" style="height: 60%;" @click="go('实验室利用率排行', 'table4')">
						<table4-vue />
					</div>
				</el-col>
			</el-row>
		</div>

	</div>
</template>

<style lang="scss" scoped>
	.HomeView {}
</style>